<script setup lang="ts">
  import { ref } from 'vue';
  import { setAuthen, getUserInfo } from '/@/apis/userApi';
  import { useRequest } from 'vue-request';
  import { NotifySuccess, isNull, NotifyWarn } from '/@/utils';
  import { i18nTranslate } from '/@/i18n';
  import { upload } from '/@/utils/request';
  import { useRouter } from 'vue-router';
  import { useUserId } from '/@/hooks';
  const router = useRouter();
  const userInfo = ref(<any>{});
  const { getUserId } = useUserId();
  const files1 = ref([]);
  const files2 = ref([]);
  const idCardImg = ref('');
  const reverseIdCardImg = ref('');
  const kycName = ref('');
  const cardNo = ref('');
  const isEdit = ref(true);
  const handleAfterRead = async (varFile: any) => {
    try {
      // 文件读取成功后开始上传
      const uploadedData: any = await upload(varFile.file as File);
      idCardImg.value = uploadedData;
      //  cover
    } catch (error) {
      console.error(error);
      files1.value = [];
      // 上传失败了
      varFile.state = 'error';
    }
  };
  const handleAfterRead2 = async (varFile: any) => {
    try {
      // 文件读取成功后开始上传
      const uploadedData: any = await upload(varFile.file as File);
      reverseIdCardImg.value = uploadedData;
      //  cover
    } catch (error) {
      console.error(error);
      files2.value = [];
      // 上传失败了
      varFile.state = 'error';
    }
  };
  const onSubmit = () => {
    if (isNull(kycName.value)) {
      NotifyWarn(i18nTranslate('Pleaseenteryourname'));
    } else if (isNull(cardNo.value)) {
      NotifyWarn(i18nTranslate('Pleaseentertheidentity'));
    } else if (isNull(idCardImg.value)) {
      NotifyWarn(i18nTranslate('Pleaseuploadthefrontsideofyouridentitycard'));
    } else if (isNull(reverseIdCardImg.value)) {
      NotifyWarn(i18nTranslate('Pleaseuploadthebacksideofyouridentitycard'));
    } else {
      const params = {
        member: getUserId(),
        name: kycName.value,
        cardNo: cardNo.value,
        idCardImg: idCardImg.value,
        reverseIdCardImg: reverseIdCardImg.value,
      };
      requestSetAuthen.run(params);
    }
  };
  const requestSetAuthen = useRequest(setAuthen, {
    manual: true,
    onSuccess() {
      NotifySuccess(i18nTranslate('Successful'));
      router.back();
    },
    onError() {
      return;
    },
  });
  useRequest(getUserInfo, {
    defaultParams: [{ member: getUserId() }],
    onSuccess(data: any) {
      userInfo.value = data;
      if (userInfo.value.cardState === 'PASS' || userInfo.value.cardState === 'WAIT') {
        // 等待审核 通过审核
        isEdit.value = false;
        kycName.value = userInfo.value.uname;
        let aaa = [];
        console.log(userInfo.value);

        for (let index = 0; index < userInfo.value.cardNo.length; index++) {
          let arrLength = userInfo.value.cardNo.length;
          const element = userInfo.value.cardNo[index];
          if (index >= arrLength - 8 && index < arrLength - 4) {
            aaa.push('*');
          } else {
            aaa.push(element);
          }
        }
        cardNo.value = aaa.join('');
        idCardImg.value = userInfo.value.idCardImg;
        reverseIdCardImg.value = userInfo.value.reverseIdCardImg;
      } else {
        // 审核拒绝
        isEdit.value = true;
      }
    },
  });
</script>

<template>
  <div class="kyc">
    <AppBar back :primary="true" :title="$t('KYC')" />
    <div class="kyc_content">
      <InputBase
        :label="$t('Name')"
        v-model="kycName"
        :disabled="!isEdit"
        :placeholder="$t('Pleaseenteryourname')"
      />
      <InputBase
        :label="$t('Identity')"
        v-model="cardNo"
        :disabled="!isEdit"
        :placeholder="$t('Pleaseentertheidentity')"
      />
      <div class="content_uploader">
        <div class="box">
          <div v-if="isEdit">
            <var-uploader v-model="files1" :maxlength="1" @after-read="handleAfterRead" />
            <p class="tips">{{ $t('Pleaseuploadthefrontsideofyouridentitycard') }}</p>
          </div>
          <div v-else class="cardImg">
            <img :src="userInfo.idCardImg" />
            <div class="hidden_box"></div>
          </div>
        </div>
        <div class="box">
          <div v-if="isEdit">
            <var-uploader v-model="files2" :maxlength="1" @after-read="handleAfterRead2" />
            <p class="tips">{{ $t('Pleaseuploadthebacksideofyouridentitycard') }}</p>
          </div>
          <div v-else class="cardImg">
            <img :src="userInfo.reverseIdCardImg" />
            <div class="hidden_box"></div>
          </div>
        </div>
      </div>
      <LargePrimaryButton v-if="isEdit" block @click="onSubmit" class="submit_button">{{
        $t('Submit')
      }}</LargePrimaryButton>
      <div v-else>
        <LargePrimaryButton block @click="onSubmit" disabled class="submit_button">
          <div class="btn_icon">
            <img v-if="userInfo.cardState === 'WAIT'" :src="$img('me/time_icon.png')" />
            <img v-else :src="$img('me/success_icon.png')" />
          </div>
          <span
            >{{ userInfo.cardState === 'WAIT' ? $t('Waitingforreview') : $t('Certified') }}
          </span>
        </LargePrimaryButton>
      </div>
      <div class="kyc_tips">
        {{ $t('RealnameauthenticationTips') }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .kyc {
    padding-bottom: 50px;
    height: 100vh;
    .kyc_content {
      padding: 30px;

      .content_title {
        font-size: 40px;
        font-weight: 600;
        margin-top: 30px;
      }

      .content_title_sub {
        font-weight: 500;
        font-size: 26px;
        color: #999999;
        margin-top: 15px;
      }

      .count_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 20px 0 30px;

        .counts {
          @include center;
          width: 220px;
          height: 120px;
          background: #f8f8f8;
          border-radius: 16px;
          margin-bottom: 14px;
        }
      }

      .content_uploader {
        margin-top: 30px;
        display: flex;
        color: rgba(255, 255, 255, 0.45);
        font-size: 20px;

        .box {
          width: 50%;
          display: flex;
          justify-content: center;
        }

        .tips {
          width: 80%;
          text-align: center;
          word-break: break-word;
        }
        .cardImg {
          width: 160px;
          height: 160px;
          position: relative;
          .hidden_box {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(255, 255, 255,0.1);
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .submit_button {
        margin-top: 40px;
        background-color: #0063F5;
        .btn_icon {
          width: 40px;
          height: 40px;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .kyc_tips {
      margin-top: 50px;
      color: rgba(255, 255, 255, 0.45);
      font-size: 26px;
      line-height: 34px;
    }
  }
</style>
<style lang="scss">
  .kyc {
    .van-checkbox__icon {
      font-size: 24px;
    }

    .van-cell {
      background: #f8f8f8;
      border-radius: 16px;
    }

    .var-form-details {
      display: none;
    }

    .var-uploader__file-list {
      @include center;
    }
    .var-button--disabled {
      color: #fff;
    }
    .var-app-bar {
        background: #fff;
    }
    .var-uploader__action {
      background:#242424;

    }
  }
</style>
